.slider {
  touch-action: none;
  user-select: none;

  position: relative;

  display: flex;
  align-items: center;

  width: 155px;
  height: 16px;

  & .sliderTrack {
    position: relative;

    flex-grow: 1;

    height: 5px;

    background-color: var(--color-accent-900);
    border-radius: 9999px;
  }

  & .sliderRange {
    position: absolute;
    height: 100%;
    background-color: var(--color-accent-500);
    border-radius: 9999px;
  }

  & .sliderThumb {
    position: relative;

    display: block;

    width: 16px;
    height: 16px;

    background-color: var(--color-accent-500);
    border-radius: 50%;

    &::before {
      content: '';

      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: 8px;
      height: 8px;

      background-color: var(--color-light-100);
      border-radius: 50%;
    }
  }
}

.container {
  display: flex;
  column-gap: 10px;
  align-items: center;
}

.value {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  text-align: center;

  background-color: inherit;
  border: 1px solid var(--color-dark-300);
  border-radius: 3px;

  &::-webkit-inner-spin-button {
    appearance: none;
  }

  &::placeholder {
    color: var(--color-light-100);
  }
}
